<script setup>
import LineChart from './LineChart.vue';
import Pie from './Pie.vue';
import Histogram from './Histogram.vue';
import Scatter from './Scatter.vue'
import { ref, shallowRef, watch } from 'vue';

const componentName = shallowRef(localStorage.getItem('chart-Type') || 'Histogram')

const options = shallowRef({
    Histogram,
    LineChart,
    Pie,
    Scatter
})

watch(componentName,(newCom) => {
    console.log(newCom);
    localStorage.setItem('chart-Type',newCom)
})
</script>

<template>
    <div class="echart">
        <div class="btn">
            <el-radio-group v-model="componentName" size="large">
                <el-radio-button label="Histogram">柱状图</el-radio-button>
                <el-radio-button label="LineChart">折线图</el-radio-button>
                <el-radio-button label="Pie">饼图</el-radio-button>
                <el-radio-button label="Scatter">散点图</el-radio-button>
            </el-radio-group>
        </div>
        <div class="com">
            <component :is="options[componentName]"></component>
        </div>
    </div>
</template>

<style scoped lang="scss">
.echart{
    background-color: white;
    height: 90%;
    padding: 10px 20px;
    box-sizing: border-box;

    & .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    & .com{
        width: 100%;
        height: 85%;
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

</style>